<template>
  <div>
    <el-form :inline="true" :model="param">
      <el-form-item label="会员账号">
        <el-input v-model="param.mobile" type="number" oninput="if(value.length>11)value=value.slice(0,11)" placeholder="会员账号" clearable></el-input>
      </el-form-item>
      <el-form-item label="会员昵称">
        <el-input v-model="param.nickname" placeholder="会员昵称" maxlength="15" clearable></el-input>
      </el-form-item>
      <el-form-item prop="area" label="所在区县">
        <el-cascader class="w100" placeholder="请选择省市区域" v-model="area" filterable clearable :options="areaList" @change="handleChange"></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getDataList">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border style="width: 100%; " v-loading="tableLoading">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{(param.page - 1) * param.limit + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="mobile" align="center" label="会员账号">
      </el-table-column>
      <el-table-column prop="nickname" align="center" label="会员昵称">
      </el-table-column>
      <el-table-column prop="code" align="center" label="申请区县">
        <template slot-scope="{row}">
          <div>
            {{row.province_name}}{{row.city_name}}{{row.area_name}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态">
        <template slot-scope="{row}">
          <div>
            <el-tag v-if="row.status==0">申请中</el-tag>
            <el-tag type="success" v-if="row.status==1">已通过</el-tag>
            <el-tag type="danger" v-if="row.status==2">未通过</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="apply_time" align="center" label="申请时间">
      </el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openDialog(scope.row)" v-if="scope.row.status==0">审核</el-button>
          <el-button type="text" size="small" v-if="scope.row.status==2" @click="delFun(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="param.page" :page-sizes="[10, 20, 50, 100]" :page-size="param.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <!-- 审核弹窗 -->
    <el-dialog title="审核操作" :visible.sync="dialogVisible" width="30%" :before-close="close">
      <el-form :model="form" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="审核状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">审核通过</el-radio>
            <el-radio :label="2">审核不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核原因" prop="check_info" v-if="form.status==2">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.check_info">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import serviceApi from '@/api/serviceApi.js'
import applyareaagent from '@/api/applyareaagent.js'
export default {
  data () {
    return {
      param: {
        page: 1,
        limit: 10,
        load_other: false,
      },
      form: {},
      area: [],
      areaList: [],
      totalPage: 0,
      dataList: [],
      dialogVisible: false,
      tableLoading:false,
      rules: {
        status: [{ required: true, message: '请选择审核状态状态', trigger: 'change' }],
        check_info: [{ required: true, message: '请输入选择理由', trigger: 'change' }]
      }
    }
  },
  created () {
    this.getProvinces();
    this.getList()
  },
  methods: {
    // 打开弹窗
    openDialog (row) {
      this.form.id = row.id
      this.dialogVisible = true;
    },
    // 关闭弹窗
    close () {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
    },
    // 审核提交
    submit () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          applyareaagent.applyareaagentCheck(this.form).then(res => {
            if (res && res.data.code == 200) {
              this.$message.success('审核成功！');
              this.close();
              this.getList();
            }
          })
        }
      })
    },
    // 删除
    delFun (row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        applyareaagent.deleteCheck(row.id).then(res => {
          if (res && res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          }
        })
      })
    },
    getList () {
      this.tableLoading=true;
      applyareaagent.applyareaagentPage(this.param).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount;
        }
      }).finally(()=>{
        this.tableLoading=false;
      })
    },
    handleChange (value) {
      if (value.length) {
        let res = this.getTxt(this.areaList, value, 0, [])
        let code = ['province_code', 'city_code', 'area_code']
        let name = ['province_name', 'city_name', 'area_name']
        for (let i in value) {
          this.param[code[i]] = value[i]
        }
      } else {
        this.area = [];
        this.param.province_code = ''
        this.param.city_code = ''
        this.param.area_code = ''
      }
    },

    getTxt (v, code, index, res) {
      for (let i = 0; i < v.length; i++) {
        let item = v[i]
        if (code[index] == item.value) {
          res.push(item.label)
          if (item.children && item.children.length) {
            this.getTxt(item.children, code, index + 1, res)
          }
          break
        }
      }
      return res
    },

    // 获取省市区
    getProvinces () {
      serviceApi.getCnareaTreelbs().then(res => {
        if (res && res.data.code == 200) {
          this.areaList = res.data.tree.children
        }
      })
    },
    // 每页数
    sizeChangeHandle (val) {
      this.param.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.param.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.param.page = 1
      this.getList()
    },
    // 重置
    reset () {
      this.param = {
        page: 1,
        limit: 10,
        load_other: true,
      }
      this.area = [];
      this.getList()
    }
  }
}
</script>

<style>
.el-form--inline .el-form-item__content {
  width: auto !important;
}
input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>
<style lang="scss" scoped>
</style>
